<template>
  <div class="edit-page-wrap">
    <div class="city-info-block">
      <div class="block-title">
        <i class="el-icon-s-data block-title-icon"></i>
        VPS信息
      </div>
      <div class="block-content block-content-row2">
        <div class="block-row" v-for="(item, idx) in userinfoFields" :key="idx"
          :class="{ 'block-row-time': item.label === '时间：' }">
          <span class="block-label">{{ item.label }}</span>
          <span
            class="block-value"
            :title="item.value && String(item.value).length > 18 ? item.value : ''"
           
          >
            {{ item.value && String(item.value).length > 32 ? (String(item.value).slice(0, 32) + '...') : item.value || '-' }}
          </span>
        </div>
        <div class="block-row block-actions" style="grid-column: span 2;">
          <el-button size="mini" type="primary" @click="showModify(city, true)">
            <i class="el-icon-edit"></i> 修改
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </div>
      </div>
    </div>
    <div class="back-btn-wrap">
      <el-button @click="$router.back(-1)" type="primary" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </el-button>
    </div>
    <Modify v-if="modifyVisible" :visible.sync="modifyVisible" :city="modifyCity" :edit="modifyEdit"
      @update="handleUpdate" />
  </div>
</template>

<script>
import Modify from './modify.vue';
export default {
  name: "EditDialog",
  components: { Modify },
  data() {
    return {
      visible: true,
      city: {},
      modifyVisible: false,
      modifyCity: {},
      modifyEdit: false,
    };
  },
  created() {
    // 获取路由参数并解析
    if (this.$route.query.city) {
      try {
        this.city = JSON.parse(decodeURIComponent(this.$route.query.city));
        console.log(this.city);
      } catch (e) {
        this.city = {};
      }
    }
  },
  computed: {
    userinfoFields() {
      const c = this.city || {};
      return [
        { label: 'IP地址：', value: c.ipAddress },
        { label: '城市名：', value: c.cityName },
        { label: '国家：', value: c.countryName }, // 补充推荐
        { label: '用户名：', value: c.userName },
        { label: '密码：', value: c.password },
        { label: '启用时间：', value: c.createTime },
        { label: '结束日期：', value: c.endTime },
        { label: '是否过期：', value: c.isOverdue === 1 ? '是' : '否' },

        { label: '操作系统：', value: c.operSystem },
        { label: '平台类型：', value: c.platform },
        { label: '节点状态：', value: c.nodeStatus === 1 ? '正常' : '异常' },
        { label: '节点类型：', value: c.nodeType },
        { label: '服务名称：', value: c.serviceName },

        { label: '内存大小：', value: c.memorySize },
        { label: '磁盘容量：', value: c.diskSize },
        { label: '带宽：', value: c.bandWidth },
        { label: 'CPU核数：', value: c.cpuInfo },
        { label: '端口：', value: c.portNum },
        { label: '备注信息：', value: c.remark }
      ];
    }
  },
  methods: {
    showModify(row, isEdit) {
      this.modifyCity = { ...row };
      this.modifyEdit = isEdit;
      this.modifyVisible = true;
    },
    handleUpdate(newData) {
      // 更新本地city数据
      this.city = { ...this.city, ...newData };
      this.modifyVisible = false;
      // 传递数据回Home页面
      this.$router.replace({
        path: this.$route.query.from || '/tool/toollist',
        query: {
          updatedCity: encodeURIComponent(JSON.stringify(this.city))
        }
      });
    },
    handleDelete() {
      // 跳转到Home页面并传递要删除的id
      this.$router.replace({
        path: this.$route.query.from || '/tool/toollist',
        query: {
          deleteId: this.city.id
        }
      });
    }
  }
};
</script>

<style scoped>
.edit-page-wrap {
  background: linear-gradient(135deg, #f8fafc 60%, #e9f0fb 100%);
  border-radius: 22px;
  box-shadow: 0 8px 36px #b3c6e822;
  padding: 48px 32px 32px 32px;
  margin: 36px auto 0 auto;
  max-width: 600px;
  min-width: 320px;
  color: #232526;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.city-info-block {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 18px #b3c6e822;
  padding: 38px 36px 28px 36px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180px;
  border: 1.5px solid #e9f0fb;
  width: 100%;
  max-width: 520px;
  animation: fadeInCard 0.5s;
}

@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.block-title {
  font-size: 24px;
  color: #409eff;
  font-weight: 700;
  margin-bottom: 26px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.block-title-icon {
  font-size: 26px;
  color: #53caff;
  margin-right: 10px;
}

.block-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.block-content-row2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}

.block-row {
  font-size: 16px;
  color: #232526;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 2px 0;
  line-height: 1.7;
  border-bottom: 1px dashed #e9f0fb;
}

.block-row-time {
  align-items: center !important;
}

.block-label {
  color: #409eff;
  font-weight: 600;
  min-width: 90px;
  margin-right: 8px;
  font-size: 15px;
  text-align: right;
  flex-shrink: 0;
}

.block-value {
  color: #232526;
  word-break: break-all;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  line-height: 1.7;
  transition: color 0.2s;
}

.block-row:last-child {
  border-bottom: none;
}

.block-actions {
  margin-top: 22px;
  gap: 12px;
}

.block-actions .el-button {
  margin-right: 12px;
  margin-bottom: 4px;
  font-size: 15px;
  padding: 8px 22px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 1px 6px #b3c6e822;
  transition: background 0.18s, box-shadow 0.18s;
  display: inline-flex;
  align-items: center;
}

.block-actions .el-button i {
  margin-right: 5px;
}

.block-actions .el-button[type="danger"] {
  background: linear-gradient(90deg, #ff7875 60%, #ffb6b9 100%) !important;
  color: #fff !important;
}

.block-actions .el-button[type="danger"]:hover {
  background: linear-gradient(90deg, #ffb6b9 60%, #ff7875 100%) !important;
}

.back-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.back-btn {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 400;
  font-size: 17px;
  padding: 12px 20px;
  box-shadow: 0 2px 12px #b3c6e822;
  transition: background 0.18s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}

.back-btn:hover {
  background: linear-gradient(90deg, #53caff 60%, #409eff 100%);
  color: #fff;
  box-shadow: 0 4px 18px #b3c6e822;
}

.back-btn i {
  font-size: 20px;
  margin-right: 8px;
}

.even-descriptions ::v-deep .el-descriptions__body {
  table-layout: fixed !important;
  width: 100% !important;
}

.even-descriptions ::v-deep .el-descriptions__table {
  table-layout: fixed !important;
  width: 100% !important;
}

.even-descriptions ::v-deep .el-descriptions-item__cell {
  width: 50% !important;
  max-width: 50%;
  word-break: break-all;
  white-space: normal;
  vertical-align: top;
}

.even-descriptions ::v-deep .el-descriptions-item__label {
  width: 40%;
  min-width: 80px;
  color: #409eff;
  font-weight: 600;
  font-size: 15px;
  text-align: right;
  padding-right: 8px;
}

.even-descriptions ::v-deep .el-descriptions-item__content {
  width: 60%;
  color: #232526;
  font-size: 15px;
  text-align: left;
  word-break: break-all;
  white-space: normal;
}
</style>
